<template>
	<view class="">
		<view class="tabbarBox">
			<!-- <u-button @click="show = true">打开ActionSheet</u-button> -->
			<!-- <view class="leftjz"></view>
			<view class="middle"></view>
			<view class="rightmy"></view> -->
			<view class="tabbarItem" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.pagePath, index)">
				<image mode="heightFix" class="tabImg" :src="current === index ? item.selectedIconPath : item.iconPath"></image>
				<view class="tabText" :class="{'tabTextActive': current === index}"  >{{item.text}}</view>
			</view>
			
			<view class="middle" @click="openPopup">
				<image class="rotatable" :class="{ rotated: show }" src="../../static/images/tabbar/plus.png" mode="heightFix"></image>
			</view>
		</view>
		<u-popup :show="show" :round="10" mode="top" @close="close" @open="open" :customStyle="popupCustomStyle" :safeAreaInsetTop="true">
			<view style="height: 38vh; position: relative;">
				<!-- <view :style="{height: statusBarHeight + 'px'}"></view>
				<view :style="{height: titleBarHeight + 'px'}">金账簿</view> -->
				<view class="addTitle" :style="{height: titleBarHeight + 'px'}">
					新增账本
				</view>
				<view class="tipText">
					<u-icon size="23" name="bookmark-fill" labelSize="14" :label="showText"></u-icon>
					<!-- <text>人生若只如初见，何事秋风悲画扇</text> -->
				</view>
				<view class="formBox">
					<u--form :model="formData" ref="uForm" 
					:labelStyle="{color: '#fff',fontWeight: 'bolder',
								background: 'linear-gradient(to top right, #8B4500, #000000)',
								'-webkit-background-clip': 'text',
								color: 'transparent'}"
					>
						<u-form-item label="账本名称" prop="costName" labelWidth="70">
							<u--input shape="circle" :custom-style="{ backgroundColor: 'rgba(255, 255, 255, 0.99)' }" clearable placeholder="请输入名称" v-model="formData.costName" />
						</u-form-item>
						<u-form-item label="成本金额" prop="costAmount" labelWidth="70">
							<u--input type="digit" shape="circle" :custom-style="{ backgroundColor: 'rgba(255, 255, 255, 0.99)' }" clearable placeholder="请输入金额" v-model="formData.costAmount" />
						</u-form-item>
						
					</u--form>
					<u-button :customStyle="{width: '50%', marginTop: '70rpx' }" color="linear-gradient(to top right, #f6c74f, #f5a623)" type="warning" shape="circle" @click="submit">提交</u-button>
				</view>
				 <!-- bottom: '0rpx', position: 'fixd' -->
			</view>
		</u-popup>
		<!-- <u-toast ref="uToast"></u-toast> -->
		<u-notify ref="uNotify"></u-notify>
	</view>
</template>

<script>
	import {getStatusBarHeight, getTitleBarHeight} from "@/utils/system.js"

	const costObj = uniCloud.importObject("costObj")
	
	export default {
		name:"custom-tav-bar",
		data() {
			return {
				formData: {
					costName: '',
					costAmount: ''
				},
				textList: [
					'世间安得双全法,不负如来不负卿',
					'人间自是有情痴,此恨不关风与月',
					'衣带渐宽终不悔,为伊消得人憔悴',
					'人生若只如初见,何事秋风悲画扇',
					'伤心桥下春波绿,曾是惊鸿照影来',
					'两情若是久长时,又岂在朝朝暮暮',
					'玲珑骰子安红豆,入骨相思知不知',
				],
				showText: '',
				rules: {
					name: [
						{
							required: true,
							message: '请输入账本名称',
							trigger: ['blur', 'change']
						},
						{
							min: 1,
							max: 5,
							message: '长度在1-5个字符之间',
							trigger: ['blur', 'change']
						},
					],
					costAmount: [
						{
							required: true, 
							message: '请输入成本金额',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证：金额必须大于 0.00
							validator: (rule, value, callback) => {
								const num = Number(value);
								if (isNaN(num) || num <= 0) {
									return false;
								}
								return true;
							},
							message: '金额必须大于0.00元',
							trigger: ['change', 'blur']
						},
						{
						  // 自定义验证：金额不能超过9999999999.00
							validator: (rule, value, callback) => {
								const num = Number(value);
								if (isNaN(num) || num > 9999999999.00) {
								  return false;
								}
								return true;
							},
							message: '金额最高不可超过9999999999.00元',
							trigger: ['change', 'blur']
						},
						{
							// 正则验证：只允许数字和最多两位小数
							pattern: /^(\d+)(\.\d{1,2})?$/,
							transform(value) {
							return String(value);
							},
							message: '只能输入数字，且最多保留两位小数',
							trigger: ['change', 'blur']
						},
					]
				},
				show: false,
				popupCustomStyle: {
					// 'background-color': 'rgba(255,255,255,0.8)'
					background: 'linear-gradient(to bottom right, rgba(255, 222, 173, 0.9), rgba(255, 255, 255, 0.9))'
					// background: 'linear-gradient(to bottom right, #FFDEAD, #FFF)', // 渐变背景色
					// borderRadius: '10px', // 可选：圆角边框
					// background:
					// 	`linear-gradient(to bottom, transparent, #fff 600px),
					// 	radial-gradient(90% 300px at left top, #FFDEAD, transparent),
					// 	radial-gradient(60% 300px at right top, #f9c74f, transparent)`
				},
				tabList: [
					{
						text: '首页',
						pagePath: '/pages/index/index',
						selectedIconPath: '/static/images/tabbar/home-h.png',
						iconPath: '/static/images/tabbar/home.png'
					},
					{
						text: '我的',
						pagePath: '/pages/demo/demo',
						selectedIconPath: '/static/images/tabbar/me-h.png',
						iconPath: '/static/images/tabbar/me.png'
					}
				]
			}
		},
		mounted() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					console.log(res, this.formData);
					this.addCost()
				}).catch(errors => {
					uni.$u.toast('信息填写不正确')
				})
			},
			async addCost() {
				this.formData.openid = this.openid
				this.formData.costName = uni.$u.trim(this.formData.costName)
				this.formData.costAmount = Number(this.formData.costAmount).toFixed(2)
				
				try{
					const res = await costObj.addCost(this.formData)
					console.log('res', res);
					if(res && res.id !== null) {
						// const params = {
						// 		type: 'defult',
						// 		title: '成功主题(带图标)',
						// 		message: "新增成功",
						// 		iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
						// 		duration: '3000'
						// 	}
						// this.$refs.uToast.show({
						// 	...params,
						// 	complete() {
						// 		console.log("complete-showSuccess");
						// 	}
						// })
						
						this.$refs.uNotify.show({
							top: 100,
							type: 'warning',
							message: '新增成功'
						})
						this.show = false
						this.formData = {}
						this.$emit('updateData')
					}
				}catch(e){
					//TODO handle the exception
					if(e.errCode === 400) {
						this.$store.commit('SET_TABBAR_INDEX', {current: 1})
						uni.switchTab({
							url: '/pages/demo/demo'
						})
					}
				}
				
				
			},
			// 切换 tab 的方法
			switchTab(url, index) {
				this.$store.commit('SET_TABBAR_INDEX', {current: index})
				uni.switchTab({ url });
			},
			open() {
				console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			openPopup() {
				uni.$u.randomArray(this.textList)
				this.showText = this.textList[0]
				this.$nextTick(() => {
					this.show = true
				})
				
			}
		},
		// watch: {
		// 	// 监听路由变化，更新当前选中的 tab
		// 	'$route.path': {
		// 		immediate: true,
		// 		handler(path) {
		// 			this.current = TAB_ROUTES[path] || 0;
		// 		}
		// 	}
		// }
		computed: {
			current () {
				return this.$store.getters.getCurrent
			},
			
			openid() {
				return this.$store.getters.getOpenId
			},
			
			// statusBarHeight() {
			// 	return getStatusBarHeight()
			// },
			titleBarHeight() {
				return getTitleBarHeight()
			}
		}
	}
</script>

<style lang="scss">
	.tabbarBox {
		position: fixed;
		width: 100%;
		height: 130rpx;
	
		// background: red;
		// border: 1rpx solid gray;
		
		background: #fff;
		border-top: 1rpx solid #e2e8f0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		z-index: 999;
		// padding-bottom: env(safe-area-inset-bottom);  /* 适配全面屏 */
		// border: red;
		// background: red;
		// .leftjz {
		// 	height: 100%;
		// 	width: 100%;
		// 	border: 1rpx solid gray;
		// }

		// .middle {
		// 	height: 100%;
		// 	width: 100%;
		// 	border: 1rpx solid red;
		// }

		// .rightmy {
		// 	height: 100%;
		// 	width: 100%;
		// 	border: 1rpx solid green;

		// }
		
		.tabbarItem {
			// border: 1rpx solid green;
			padding-left: 30rpx;
			padding-right: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			transition: all 0.2s ease;
			font-size: 24rpx;
			.tabImg {
				width:50rpx;
				height: 50rpx;
			}
			
			.tabText {
				color: #9b9b9b;
			}
			
			.tabTextActive {
				color: #f5a623;
			}
		}
		
		.middle {
			position: absolute;
			background: #f5a623;
			border-radius: 50%;
			height: 120rpx;
			width: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: translate(0%, -40%);
			transition: all 0.2s ease;
			border: 10rpx solid #FFF;
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
	
	.rotatable {
	  transition: transform 0.5s ease; /* 平滑过渡效果 */
	}
	
	.rotated {
	  transform: rotate(225deg); /* 顺时针旋转220度 */
	}
	
	.tabbarItem:before {
	    content: '';
	    position: absolute;
	    bottom: -10rpx;
	    left: 50%;
	    transform: translateX(-50%);
	    width: 16rpx;
	    height: 3px;
	    background: #f5a623;
	    border-radius: 3px;
	}
	.tabbarItem:active {
	    transform: scale(0.95);
	}
	
	.middle:active {
		transform: scale(0.95);
	}
	
	.addTitle{
		position: relative;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		font-weight: bolder;
		font-size: 50rpx;
		background: linear-gradient(to top right, #8B4500, #000000);
		-webkit-background-clip: text;
		color: transparent;
	}
	
	.addTitle:before {
	    content: '';
	    position: absolute;
	    bottom: -10rpx;
	    left: 20rpx;
	    transform: translateX(0%);
	    width: 100rpx;
	    height: 3px;
	    background: #f5a623;
	    border-radius: 3px;
	}
	
	.tipText {
		display: flex;
		justify-content: left;
		align-items: center;
		margin-top: 15rpx;
		padding-left: 20rpx;
	}
	
	.formBox {
		height: 100%;
		padding-top: 100rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
	}
	
	// .middle:before {
	//     content: '';
	//     position: absolute;
	//     bottom: -10rpx;
	//     left: 50%;
	//     transform: translateX(-50%);
	//     width: 16rpx;
	//     height: 3px;
	//     background: #3b82f6;
	//     border-radius: 3px;
	// }
	
	// /* 图标样式 */
	// :deep(.tabText) {
	//     font-size: 28rpx !important;
	//     margin-bottom: 4rpx;
	// }
	
	// /* 激活状态图标样式 */
	// :deep(.tabTextActive) {
	//     color: #3b82f6 !important;
	// }
</style>